<template>
  <div class="amap-page-container">
    <div id="container" style="width:100vw;height:100vh"></div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
      'stationData',
      'currentPosition'
    ]),
  },
  created() {
    this.$emit('showTabMenu', false);
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let current = [this.currentPosition.point.lng, this.currentPosition.point.lat]
      let station = [this.stationData.longitude, this.stationData.latitude]

      var map = new BMap.Map("container");
      map.centerAndZoom(new BMap.Point(current[0], current[1]), 12);

      var p1 = new BMap.Point(current[0], current[1]);
      var p2 = new BMap.Point(station[0], station[1]);

      var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
      driving.search(p1, p2);
    }
  }
};
</script>

<style scoped>
.amap-marker-label {
  border: 0px;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 17px;
  font-weight: 550;
  text-align: center;
}
body /deep/ .main-view{
  padding-bottom: 0;
}
</style>